<style lang="less">
	/*@import './international.less';*/
</style>

<template>
	<div>
		<common-page v-bind="menuPage" @ajaxLoadSuccess="updateRoles">
			<template slot="modal">
				<!--<Tabs type="card">-->
				<!--<TabPane label="URL权限" v-model="menuPage.detailData.type" value="url">-->
				<Form :model="menuPage.detailData" :label-width="80">
					<FormItem label="sn">
						<Input v-model="menuPage.detailData.sn"></Input>
					</FormItem>
					<FormItem label="权限名">
						<Input v-model="menuPage.detailData.text"></Input>
					</FormItem>
					<FormItem label="类型">
						<Select v-model="menuPage.detailData.type">
							<Option value="url" :key="1">URL</Option>
							<Option value="menu" :key="2">菜单</Option>
							<!--<Option value="page" :key="2">页面</Option>-->
						</Select>
					</FormItem>
					<FormItem label="状态">
						<Select v-model="menuPage.detailData.state">
							<Option value="1" :key="1">有效</Option>
							<Option value="2" :key="2">无效</Option>
						</Select>
					</FormItem>
					<div style="text-align: center;">
						<autoTransfer url="role/list" :targetKeys.sync="menuPage.detailData.sysRoleIdList" :titles="['可选角色', '已分配角色']"
									  :listStyle="{height:'300px',width:'200px', textAlign: 'left'}"></autoTransfer>
					</div>
				</Form>
				<!--</TabPane>-->
				<!--<TabPane label="菜单权限" v-model="menuPage.detailData.type" value="url">-->

				<!--</TabPane>-->
				<!--</Tabs>-->
			</template>
		</common-page>
	</div>
</template>

<script>

    import commonPage from '@/views/common/common-page.vue';
    import util from '@/libs/util';
    import autoSelect from '@/views/common/autoSelect.vue';
    import autoTransfer from '@/views/common/autoTransfer.vue';
    import FormItem from "../../../node_modules/iview/src/components/form/form-item";
    import Row from "../../../node_modules/iview/src/components/grid/row";

    // 默认界面查询条件
    let pageParams = Object.assign({}, util.queryParams, { // 额外的参数,比如条件的默认值
        sortName: "id",
        sortOrder: "asc"
    });
    export default {
        name: 'permission-page',
        components: {
            Row,
            FormItem,
            commonPage,
            autoSelect,
            autoTransfer
        },
        props: {
            columns: Array
        },
        data () {
            return {
                menuPage: {
                    toolbar: {
                        menuSn: "permission",
                        buttons: []
                    },
                    list: {
                        table: {
                            columns: [{type: 'selection', width: 50, align: 'center'},
                                {type: 'index', width: 60, align: 'center'},
                                {title: 'ID', key: 'id', sortable: "custom"},
                                {title: 'sn', key: 'sn',},
                                {title: '权限名', key: 'text'},
                                {
                                    title: '类型', key: 'type', render: (h, obj) => {
                                    if (obj.row.type === "url") {
                                        return "URL";
                                    } else if (obj.row.type === "menu") {
                                        return "菜单";
                                    }
                                    return obj.row.type;
                                }
                                },
                                {
                                    title: '状态', key: 'state', render: (h, obj) => {
                                    if (obj.row.state === "1") {
                                        return "有效";
                                    } else if (obj.row.state === "2") {
                                        return "无效";
                                    }
                                    return obj.row.state;
                                }
                                }
                            ],
                            data: []
                        },
                        url: "permission/list",
                        queryParams: pageParams

                    },
                    searchbar: {
                        queryParams: pageParams,
                        inputs: [{
                            text: "sn",
                            sn: "snLike",
                            style: {
                                width: "300px"
                            }
                        }, {
                            text: "权限名",
                            sn: "text",
                            style: {
                                width: "300px"
                            }
                        }, {
                            text: "类型",
                            sn: "type",
                            type: "select",
                            style: {
                                width: "300px"
                            },
                            clearable: true,
                            options: [{
                                text: "URL",
                                value: "url"
                            }, {
                                text: "菜单",
                                value: "menu"
                            }]
                        }]
                    },
                    pageParams: pageParams,
                    detailData: {
                        menuSn: "",
                        id: "",
                        sn: "",
                        text: "",
                        type: "",
                        state: "1",
                        sysRoleIdList: []
                    }
                }
            };
        },
        methods: {
            updateRoles(cnf){ // 更新权限已经关联的角色
                let me = this;
                let response = cnf.response;
                let context = response.data;
                let dto = context.data;
                me.menuPage.detailData.sysRoleIdList = me.menuPage.detailData.sysRoleIdList || [];
                if (dto.sysRoleDtoList && dto.sysRoleDtoList.length) {
                    dto.sysRoleDtoList.forEach((value, index, arr) => {
                        me.menuPage.detailData.sysRoleIdList.push(value.id);
                    });
                }
            }
        },
        created () {
        },
        mounted() {
        }
    };
</script>
